<template>
  <div class="meeting-notice-container">
    <!-- 顶部操作区 -->
    <div class="header">
      <div class="title">会议通知管理台</div>
      <el-button type="primary" @click="handleAddNotice" style="margin-right: -850px;">新增通知</el-button>
      <el-button type="primary" @click="handleStatistics">通知统计</el-button>
    </div>

    <!-- 功能标签 -->
    <div class="tabs">
      <el-radio-group v-model="activeTab" size="large" @change="handleTabChange">
        <el-radio label="notice-query">
          <i class="el-icon-search"></i> 通知查询
        </el-radio>
        <el-radio label="notice-send">
          <i class="el-icon-s-data"></i> 通知发送
        </el-radio>
        <el-radio label="notice-stat">
          <i class="el-icon-pie-chart"></i> 通知统计
        </el-radio>
      </el-radio-group>
    </div>

    <!-- 数据概览区 -->
    <div class="overview">
      <div class="overview-item">
        <div class="item-title">本月通知总量</div>
        <div class="item-value">127</div>
        <div class="item-desc">可发送通知数量</div>
      </div>
      <div class="overview-item">
        <div class="item-title">已发送/已读</div>
        <div class="item-value status-normal">正常</div>
      </div>
      <div class="overview-item">
        <div class="item-title">未读通知</div>
        <div class="item-value status-process">跟进</div>
      </div>
      <div class="overview-item">
        <div class="item-title">待审批通知</div>
        <div class="item-value status-warning">处理中</div>
      </div>
      <div class="overview-item warning">
        <div class="item-title">已驳回通知</div>
        <div class="item-value status-alert">预警</div>
      </div>
    </div>

    <!-- 通知列表 -->
    <el-table 
      :data="noticeList" 
      border 
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column 
        prop="date" 
        label="周期" 
      />
      <el-table-column 
        prop="count" 
        label="数量" 
      />
      <el-table-column 
        prop="track" 
        label="通知跟踪" 
      />
      <el-table-column 
        prop="status" 
        label="状态" 
      >
        <template #default="scope">
          <el-tag :type="scope.row.statusType">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column 
        prop="operation" 
        label="操作" 
      >
        <template #default="scope">
          <el-button 
            type="text" 
            icon="el-icon-check" 
            @click="handleDetail(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('notice-query') // 默认选中“通知查询”
const noticeList = ref([
  {
    date: '2025-02-01 周期',
    count: '042',
    track: '220',
    status: '进行中',
    statusType: 'info',
    operation: '详情'
  },
  {
    date: '2025-02-02 周期',
    count: '043',
    track: '190',
    status: '已完成',
    statusType: 'success',
    operation: '详情'
  },
  {
    date: '2025-02-03 周期',
    count: '045',
    track: '200',
    status: '待审批',
    statusType: 'warning',
    operation: '详情'
  },
  {
    date: '2025-02-04 周期',
    count: '048',
    track: '290',
    status: '已驳回',
    statusType: 'danger',
    operation: '详情'
  }
])

const handleTabChange = (tab) => {
  console.log('切换标签：', tab)
  // 可扩展：根据标签切换不同内容/接口请求
}

const handleAddNotice = () => {
  ElMessage.success('执行新增通知逻辑')
}

const handleStatistics = () => {
  ElMessage.success('执行通知统计逻辑')
}

const handleDetail = (row) => {
  ElMessage.info(`查看 ${row.date} 通知详情`)
  console.log('通知详情：', row)
}
</script>

<style scoped>
.meeting-notice-container {
  padding: 20px;
  background: #fff;
  min-height: calc(100vh - 60px);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.tabs {
  margin-bottom: 20px;
}

.overview {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 20px;
}

.overview-item {
  flex: 1;
  min-width: 200px;
  padding: 15px;
  background: #f8f9fd;
  border-radius: 8px;
}

.item-title {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.item-value {
  font-size: 16px;
  font-weight: bold;
}

.status-normal {
  color: #67c23a;
}
.status-process {
  color: #e6a23c;
}
.status-warning {
  color: #f56c6c;
}
.status-alert {
  color: #ff0000;
}

.warning {
  background: #fff2f2;
}

.el-radio-group {
  display: flex;
  gap: 20px;
}

.el-radio {
  cursor: pointer;
  display: flex;
  align-items: center;
}
</style>
